import styles from './index.less';
import http from '@/http/index';
import { useEffect, useContext, useState } from 'react';
import { context } from '@/state/index';

import { RightOutlined } from '@ant-design/icons';
import ChangePhone from './components/changePhone';
import ChangeAccount from './components/changeAccount';
// import {INi} from '@/state/index'
// import List from './components/list'
export default function IndexPage() {
  let [state, dispatch] = useContext(context);
  // 0的时候展示选择类型， 类型1显示修改手机，类型2显示修改账号
  const [showType, setShowType] = useState(1);
  useEffect(() => {
    // setTimeout(() => {
    //   // 如何提交一个action， 必须是type和 data的对象
    //   dispatch({
    //     type: 'changeUser',
    //     data: { name: 12 },
    //   });
    //   dispatch({
    //     type: 'changeMenu',
    //     data: [3, 4, 5],
    //   });
    // }, 2000);
    // http.get('/users').then((res) => {
    //   console.log(res, 'res');
    //   setUser(res.users);
    // });
  }, []);

  return (
    <div className={styles.wrap}>
      {showType === 0 && (
        <div className={styles.selectType}>
          <div className={styles.item}>
            <img
              className={styles.itemImg}
              src="https://img0.baidu.com/it/u=3458844506,1034627623&fm=26&fmt=auto"
            />
            <div>
              <p className={styles.itemText1}>手机号码修改</p>
              <span className={styles.itemText2}>修改当前账号手机号码</span>
            </div>
            <RightOutlined className={styles.itemIcon} />
          </div>

          <div className={styles.item}>
            <img
              className={styles.itemImg}
              src="https://img0.baidu.com/it/u=3458844506,1034627623&fm=26&fmt=auto"
            />
            <div>
              <p className={styles.itemText1}>密码修改</p>
              <span className={styles.itemText2}>修改当前账号手机号码</span>
            </div>
            <RightOutlined className={styles.itemIcon} />
          </div>
        </div>
      )}
      {showType === 1 && <ChangePhone setShowType={setShowType}></ChangePhone>}
      {showType === 2 && (
        <ChangeAccount setShowType={setShowType}></ChangeAccount>
      )}
    </div>
  );
}
